<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div id="counter-event-example">
	  <p>{{ total }}</p>
	  <button-counter @addAction="addClick" @increment="incrementTotal"></button-counter>
	</div>
</div>

<script>
Vue.component('button-counter', {
  template: '<div><button v-on:click="addHandler">+</button>  <button v-on:click="incrementHandler">-</button>  </div>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
        this.counter -= 1
		console.log(this.counter);
        this.$emit('increment')
    },
	 addHandler: function(){
	 	this.counter += 1
		 console.log(this.counter);
        this.$emit('addAction')
	 },
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
        this.total -= 1
		console.log(this.total)
    },
	  addClick: function(){
	  	this.total += 1
		console.log(this.total)
	  }
  }
})
</script>
</body>
</html>